<template>
  <div class="Tables">
    <el-table
      v-loading="isshowloading"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column prop="date"   label="城市" width="180" align="center">
        <template slot-scope='scope'>
          {{scope.row.city.title}}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="类型" width="180" align="center">
        <template slot-scope="scope">
          {{scope.row.type.title}}
        </template>
      </el-table-column>
      <el-table-column prop="title" label="校区名称" align="center" width="300">
        <template slot-scope="scope">
            <span class="ellipsis fxclass">{{ scope.row.short_title}}
              <span v-if='scope.row.type.value==1'>{{scope.row.type.title}}</span>
            </span>
        </template>

      </el-table-column>
      <el-table-column prop="leader_man" label="管理员姓名" align="center" width="180"></el-table-column>
      <el-table-column prop="leader_tel" label="管理员手机号" align="center"></el-table-column>
      <el-table-column prop="address" label="操作" align="center" v-if="checkPermission(['admin'])">
        <template slot-scope="scope">
         <span class="edittext" :style='{color:scope.row.type.value==1?"#ccc":"#4c68ef"}' @click="editform(scope.row.id,scope.row.type.value)">编辑</span>
         <span class="edittext" :style='{color:scope.row.type.value==1?"#ccc":"#4c68ef"}' @click="deleteitem(scope.row.id,scope.row.type.value)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10,20,30]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next"
          :total="pages.total">
        </el-pagination>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import checkPermission from "@/utils/permission";
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      currentPage4:4,
      //表格数据
      tableData: [],
      //页码数据
      pages:{}
    }
  },
  props: {
    //表格数据
    tabData:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    //是否加载loding
    isshowloading:{
      type:Boolean,
      default:true
    }
  },
  methods: {
    //按钮权限验证
    checkPermission,
    handleSizeChange(val) {
        this.$emit('changepageTotal',val)
      },
      handleCurrentChange(val) {
        this.$emit('changepage',val)
      },
        //编辑
    editform(id,val){
      if(val==1){
        this.$message({
          message:'总校不能编辑！'
        });
        return
      }
      let params = {
        id,
        type:1
      }
      //显示dialog通知父组件打开弹窗
      this.$emit('openedit',params)
    },
    //删除
    deleteitem(id,val){
      if(val==1){
        this.$message({
          message:'总校不能删除！'
        });
        return
      }
      this.$emit('deleteitem',id)
    },
  },
  mounted(){
    this.tableData = this.tabData.list
    this.pages = this.tabData.page
  },
  watch:{
    tabData(val){
      this.tableData = val.list
      this.pages = val.page
    }
  }
}
</script>

<style scoped lang='scss'>
.Tables {
  margin-top: 25px;
}
.edittext{
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
}
.pagination{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
